<template>
    <div class="bottom-box">
        <div class="bottom">
            <div class="item" v-show="a">
                <span class="money f14" :class="className">{{ className ? a : `￥${a}` }}</span>
                <span class="detail f12">{{ aTitle }}</span>
            </div>
            <div class="item" v-show="b">
                <span class="money f14" :class="className">{{ className ? b : `￥${b}` }}</span>
                <span class="detail f12">{{ bTitle }}</span>
            </div>
            <div class="item" v-show="c">
                <span class="money f14" :class="className">{{ className ? c : `￥${c}` }}</span>
                <span class="detail f12">{{ cTitle }}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "AllPriceDetail",
    props: {
        className: String,
        aTitle: {
            type: String,
            default: "首期租金",
        },
        bTitle: {
            type: String,
            default: "总租金",
        },
        cTitle: {
            type: String,
            default: "买断价",
        },
        a: String | Number,
        b: String | Number,
        c: String | Number,
    }
}
</script>

<style lang="scss" scoped>
.bottom-box {
    min-height: 35px;

    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 35px;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .money {
                color: red;

                &.active {
                    color: black;
                }
            }

            .detail {
                color: #9b949b;
            }
        }
    }
}
</style>